<template>
  <div>
    <p>count的值:{{count}} <button @click="add">修改数据</button></p>
    <p>姓名:{{obj.name}} </p>
    <p>年龄:{{obj.age}} </p>
    <p>车品牌{{obj.brand.name}}</p>
    <button @click="updateName()">修改姓名</button>
      <button @click="updateBrandName()">修改车的品牌</button>
  </div>
</template>

<script>
import {reactive,ref,watch} from 'vue'
  export default {
    name:'App',
    setup(){
    //侦听器：当需要监听数据变化就可以使用watch
    //1.监听ref定义的相应数据
    const count=ref(10);
    const add=()=>{
      count.value++
    }
//     //1、第一个参数，需要监听的目标
//     //2、第二个参数，改变以后需要触发的函数
//     watch(count,(newvalue,oldvalue)=>{
// console.log("新值"+newvalue+"旧值"+oldvalue);
//     })
    // return {count,add}
//2、监听多个响应式数据
const obj=reactive({
  name:'zhangsan',
  age:18,
  brand:{
    name:'奔驰'
  }
})
const updateName=()=>{
  obj.name="lisi"

}
// watch(obj,()=>{
//   console.log("姓名修改了");

// })
// return {obj,updateName}
//3、监听多个响应式数据
// watch([count,obj],()=>{
//   console.log("监听多个数据发生了变化");

// })
//4、监听reactive定义的响应式数据，某一个属性
// watch(()=>obj.name,()=>{
//   console.log("监听name发生了变化");

// })
const updateBrandName=()=>{
  obj.brand.name="宝马"

}
watch(()=>obj.brand,()=>{
  console.log("车的品牌发生了变化");

},{
  // 深度监听
  deep:true,
  //默认执行
  immediate:true

})
return {count,obj,updateName,add,updateBrandName}
    }
  }

</script>